
<template>
  <div style="width: 1160px;top: 0;bottom: 0;left: 0;right: 0;margin: auto">
    <div style="margin-top: 10px;margin-left: -10px;margin-right: -10px" class="app-contain">
      <el-row :gutter="50">
        <el-col :span="7">
          <el-card>
            <div slot="header" class="clearfix">
              <span>个人信息</span>
            </div>
            <el-row style="text-align: center">
              <el-image
                :fit="fit"
                :src="loginInfo.avatar"
                style="width: 100px; height: 100px"/>
            </el-row>
            <el-divider/>
            <el-row class="user-info-fullInfo">
              <label>姓名:{{ loginInfo.nickname }}</label><br>
              <label>年龄：{{ loginInfo.age }}</label><br>
              <label>个性签名：{{ loginInfo.sign }}</label><br>
              <label>手机：{{ loginInfo.mobile }}</label><br>
              <label>注册时间：{{ loginInfo.gmtCreate }}</label><br>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="17">
          <el-card shadow="hover">
            <el-tabs active-name="event" type="card">
              <el-tab-pane label="学生课程" name="event">
                <div style="overflow-y:auto;margin-top: 10px;height:470px;">
                  <!--                <div v-for ="course in courseList" :key="course.courseId" style="padding: 8px 24px 8px 8px;border: 1px solid #eee;">-->
                  <div v-for ="course in courseList" :key="course.courseId" style="margin-bottom: 10px">
                    <div style="padding: 8px 24px 8px 8px;border: 1px solid #eee;height: 130px">
                      <a style="float: left;margin-right: 12px;position: relative;" href="/course_set/231">
                        <img :src="course.courseCover" style="width: 227px;height: 123px;vertical-align: middle;" >
                      </a>
                      <div style="float: left;margin-top: 8px;width: 55%">
                        <div style="font-size: 20px;line-height: 28px;margin-left: 30px">
                          <a style="text-decoration: none" href="/course_set/231">{{ course.courseTitle }}</a>
                        </div>
                        <div style="margin-top: 32px!important;margin-left: 30px">继续学习</div>
                      </div>
                      <div style="margin-top: 48px;float: right;">
                        <a style="background: #43bc60;color: #fff;border-radius: 0;display: block;border: 10px solid #43bc60;text-decoration: none" href="/my/course/231">继续学习</a>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="个人资料修改" name="update">
                <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="100px">
                  <el-form-item label="头像" prop = "avatar">
                    <el-upload
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      class="avatar-uploader"
                      action="http://localhost:8222/eduoss/fileoss">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"/>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="昵称：" prop="realName" required>
                    <el-input v-model="loginInfo.nickname"/>
                  </el-form-item>
                  <el-form-item label="个性签名：">
                    <el-input v-model="loginInfo.sign"/>
                  </el-form-item>
                  <el-form-item label="年龄：">
                    <el-input v-model="loginInfo.age"/>
                  </el-form-item>
                  <el-form-item label="性别：">
                    <el-select v-model="loginInfo.sex" clearable placeholder="请选择">
                      <el-option :value="1" label="女"/>
                      <el-option :value="2" label="男"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="手机：">
                    <el-input v-model="loginInfo.mobile"/>
                  </el-form-item>
                  <el-form-item label="密码：" prop="password" type="password" show-password>
                    <el-input v-model="loginInfo.password" placeholder="请输入密码" show-password/>
                  </el-form-item>
                  <el-form-item label="验证码：" prop="code" >
                    <el-input v-model="loginInfo.code" style="width: 200px" placeholder="请输入验证码"/>
                    <div class="btn">
                      <el-button type="primary" plain @click="getCodeFun()">验证码</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="saveUcenter()">更新</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .my-course-item__link{
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    line-height: 22px;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    box-sizing: border-box;
    background-color: transparent;
    color: #43bc60;
    text-decoration: none;
    position: relative;
    float: left;
    margin-right: 0;
    width: 100%;
  }
  .my-course-item__picture{
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    line-height: 22px;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    color: #43bc60;
    box-sizing: border-box;
    border: 0;
    vertical-align: middle;
    width: 100%;
  }
  .my-course-item__info{
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    line-height: 22px;
    font-size: 14px;
    color: rgba(0,0,0,.56);
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    box-sizing: border-box;
    float: left;
    margin-top: 24px;
    width: 100%;
  }
  .my-course-item__title text-overflow {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    color: rgba(0,0,0,.56);
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    font-size: 20px;
    line-height: 28px;

  }
  .cd-link-major {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    white-space: nowrap;
    word-wrap: normal;
    font-size: 20px;
    line-height: 28px;
    box-sizing: border-box;
    background-color: transparent;
    text-decoration: none;
    color: rgba(0,0,0,.88);
    transition: all .3s ease;
  }
  .my-course-item__btn {
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    line-height: 22px;
    font-size: 14px;
    color: rgba(0,0,0,.56);
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    box-sizing: border-box;
    float: right;
    margin-top: 24px;
    width: 100%;
  }
  .btn cd-btn cd-btn-primary {
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    font-family: "Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    box-sizing: border-box;
    text-decoration: none;
    margin-bottom: 0;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 12px;
    line-height: 1;
    border: 1px solid transparent;
    outline: none;
    border-radius: 0;
    color: #fff;
    background: #43bc60;
    border-color: #43bc60;
    transition: all .3s ease;
    width: 100%;
  }

</style>
<script>

import registerApi from '@/api/register'
import cookie from 'js-cookie'
import orderApi from '@/api/order'
export default {
  data() {
    return {
      imageUrl: '',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      event: [],
      loginInfo: {
        id: '',
        age: '',
        avatar: '',
        mobile: '',
        nickname: '',
        sex: '',
        gmtCreate: '',
        code: '',
        sign: '',
        password: ''
      },
      form: {
        userName: '',
        realName: '',
        age: '',
        sex: '',
        birthDay: null,
        phone: null,
        userLevel: null,
        createTime: null,
        imagePath: null
      },
      courseList: [],
      formLoading: false,
      rules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getUcenter()
    this.findUcenter()
  },
  methods: {
    // 验证码
    getCodeFun() {
      registerApi.sendCode(this.loginInfo.mobile).then(response => {
        this.sending = false
        // 调用倒计时的方法
        this.timeDown()
      })
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      // 图片路径
      this.imageUrl = res.data.url
      this.loginInfo.avatar = res.data.url
      console.log(this.loginInfo.avatar)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 获取账号信息
    getUcenter() {
      var userStr = cookie.get('guli_ucenter')
      console.log(userStr)
      if (userStr) {
        this.loginInfo = JSON.parse(userStr)
        this.imageUrl = JSON.parse(userStr).avatar
        this.loginInfo.password = null
      }
    },
    // 返回学生课程信息
    findUcenter() {
      orderApi.getUcenter(this.loginInfo.id).then(response => {
        this.courseList = response.data.data.courseList
      })
    },
    // 保存修改信息
    saveUcenter() {
      registerApi.saveUcenter(this.loginInfo).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        // 退出账号跳转登陆界面
        alert('请重新登录')
        cookie.set('guli_token', '', { domain: 'localhost' })
        cookie.set('guli_ucenter', '', { domain: 'localhost' })
        this.$router.push({ path: '/login' })
      })
    }
  }

}
</script>
